<template>
  <div class="medreading">
    <Head :title="'外文核心(中文版)'"></Head>
    <div class="search">
      <div class="search-div">
        <el-select v-model="pramKey" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="标题" value="TI"></el-option>
          <el-option label="作者" value="AU"></el-option>
          <el-option label="刊名" value="TA"></el-option>
          <el-option label="PMID" value="PMID"></el-option>
          <el-option label="DOI" value="DOI"></el-option>
          <el-option label="单位" value="UNIT"></el-option>
        </el-select>
        <el-input v-model="pramValue" placeholder="请填写检索词"></el-input>
        <el-button icon="el-icon-search" @click="search()"></el-button>
      </div>
      <el-button plain @click="AdvSearch()">高级检索</el-button>
      <!-- handleCiteClick -->
    </div>
    <div class="mr-main">
      <div class="mr-filter">
        <el-button icon="el-icon-refresh" type="text" @click="refresh()">清空检索条件</el-button>
        <SidebarItem :sData="listData.year" title="年发文量" @handleFilter="handleFilterClick"></SidebarItem>
        <div class="sidebar-item sidebar-factor">
          <h2>
            指数
            <el-popover class="fr" placement="right" trigger="click" width="450">
              <BarChart :barData="listData.jcrif" height="360px" width="450px"></BarChart>
              <el-button slot="reference" icon="el-icon-s-data" type="text">柱状图</el-button>
            </el-popover>
          </h2>
          <div>
            <el-checkbox-group v-model="factorCheckbox">
              <el-checkbox
                  v-for="(item, index) in listData.jcrif"
                  :key="index"
                  :label="item.key == '20+' ? item.key.replace('+', '_999') : item.key.replace('-', '_')"
              >
                {{ item.key }}({{ item.value }})
              </el-checkbox>
            </el-checkbox-group>
            <el-input v-model="jifLeft" placeholder="起止数"></el-input>
            <span></span>
            <el-input v-model="jifRight" placeholder="终止数"></el-input>
            <el-button @click="handleFilterClick('jif')">确认筛选</el-button>
          </div>
        </div>
        <div class="sidebar-item sidebar-journal">
          <h2>
            期刊分区
            <el-popover class="fr" placement="right" trigger="click" width="450">
              <BarChart :barData="listData[['zkydalei', 'jcrquartile'][journalType]]" height="360px" type="journalType"
                        width="450px"></BarChart>
              <el-button slot="reference" icon="el-icon-s-data" type="text">柱状图</el-button>
            </el-popover>
          </h2>
          <div>
            <div>
              <el-radio v-model="journalType" :label="0">中科院</el-radio>
              <el-radio v-model="journalType" :label="1">JCR</el-radio>
            </div>
            <el-checkbox-group v-model="journalCheckbox">
              <el-checkbox
                  v-for="(item, index) in listData[['zkydalei', 'jcrquartile'][journalType]]"
                  :key="index"
                  :label="item.key"
                  style="width: 100%"
              >
                <span v-if="journalType == 0">{{ ["无分区", "一区", "二区", "三区", "四区"][item.key] }}({{
                    item.value
                  }})</span>
                <span v-else>{{ ["无分区", "1区", "2区", "3区", "4区"][item.key] }}({{ item.value }})</span>
              </el-checkbox>
            </el-checkbox-group>
            <el-button @click="handleFilterClick(['zkyDaLei', 'jcrFenQu'][journalType])">确认筛选</el-button>
          </div>
        </div>

        <SidebarItem :sData="hotspotsData" title="研究热词" @handleFilter="handleFilterClick"></SidebarItem>
        <SidebarItem ref="pt" :sData="listData.pt" qKey="pt" title="文献类型"
                     @handleFilter="handleFilterClick"></SidebarItem>
        <SidebarItem ref="journal" :sData="listData.journal" qKey="journal" title="期刊筛选"
                     @handleFilter="handleFilterClick"></SidebarItem>
        <!-- <SidebarItem ref="unit" title="机构分布" qKey="unit" @handleFilter="handleFilterClick" :sData="listData.journal"></SidebarItem> -->
        <!-- <SidebarItem title="机构分布" qKey="dept" @handleFilter="handleFilterClick" :sData="listData.dept"></SidebarItem> -->
        <SidebarItem ref="country" :sData="listData.country" qKey="country" title="国家/地区"
                     @handleFilter="handleFilterClick"></SidebarItem>
        <SidebarItem ref="author" :sData="listData.author" qKey="author" title="作者排名"
                     @handleFilter="handleFilterClick"></SidebarItem>
        <div class="sidebar-item sidebar-words" style="background-color: #e7e7e7">
          <h2>
            作者关系图
            <el-popover placement="right" trigger="click" width="1100" @hide="handleHide" @show="handleShow">
              <GraphChart
                  v-if="graphData"
                  :graphData="graphData"
                  :popoverShow="popoverShow"
                  height="600px"
                  width="1100px"
                  @handleFilter="handleFilterClick"
              ></GraphChart>
              <el-button slot="reference" icon="el-icon-zoom-in" type="text">放大</el-button>
            </el-popover>
          </h2>
          <div>
            <GraphChart
                v-if="graphData"
                :graphData="graphData"
                height="300px"
                width="100%"
                @handleFilter="handleFilterClick"
            ></GraphChart>
          </div>
        </div>
      </div>
      <div class="mr-con">
        <List :data="listData" @handlePagination="handlePagination" @handleShort="handleShort"></List>
        <!-- <GraphEChart v-if="graphData" :graphData="graphData" height="600px" width="1100px"></GraphEChart> -->
      </div>
    </div>
  </div>
</template>
<script>
import Head from "@/components/header.vue";
import List from "./components/list.vue";

import SidebarItem from "./components/sidebaritem.vue"; //左侧筛选
import {getAuthNetWork, getResearchHotspots, getSearch} from "@/api/medreading";

// import RelationGraph from "./components/echarts/RelationGraph.vue";
import GraphChart from "./components/echarts/GraphChart.vue";
import GraphEChart from "./components/echarts/GraphEChart.vue";
import BarChart from "./components/echarts/BarChart.vue";

export default {
  data() {
    return {
      pramKey: "",
      pramValue: "TGF BETA",
      factorCheckbox: [], //指数选中
      jifLeft: "",
      jifRight: "",
      journalCheckbox: [], //期刊分区选中
      journalType: 0,
      referenceCheckList: [], // 文献类型选中
      referenceShow: false,
      input: "",
      //FREQUENZ[TA]
      queryParam: {
        page: 1,
        limit: 10,
        pram: "",
        type: "QF_Study_Cn_Pubmed",
        jif: "",
        shortOrder: 1,
        shortFiled: 1
      },
      listData: {},
      hotspotsData: [],
      // 关系图
      graphData: {},
      popoverShow: false
    };
  },
  components: {
    Head,
    List,
    SidebarItem,
    GraphChart,
    GraphEChart,
    BarChart
    // RelationGraph
  },
  created() {
    if (this.$route.params.key) {
      this.pramValue = this.$route.params.key;
    }
    this.getList();
  },
  methods: {
    getList(key) {
      this.queryParam.pram = this.pramValue + (this.pramKey ? "[" + this.pramKey + "]" : "");
      if (key == "pram") {
        this.queryParam.pram = "id=" + this.queryParam.pram;
      }
      if (this.queryParam.pram == "") {
        this.$message({
          message: "请输入检索词",
          type: "warning"
        });
        return false;
      }
      getSearch(this.queryParam).then((res) => {
        this.listData = res.data;
        this.getHotspots();
      });
    },
    getHotspots() {
      getResearchHotspots({uuid: this.listData.uuid}).then((res) => {
        this.hotspotsData = [];
        res.data.filter((item, index) => {
          this.hotspotsData.push({
            key: item.keyWord,
            name: item.keyWord,
            value: item.sum,
            aidList: item.aidList
          });
        });
      });
      // getChartBar({ uuid: this.listData.uuid }).then((res) => {});
      getAuthNetWork({uuid: this.listData.uuid}).then((res) => {
        this.graphData = res.data;
        // this.graphData = {
        //     categories: [
        //         { name: "faderl stefan" },
        //         { name: "plon sharon e" },
        //         { name: "barrios becky" },
        //         { name: "pezoldt jörn" },
        //         { name: "sarin shiv k" },
        //         { name: "wang li" },
        //         { name: "bergdahl ellinor" },
        //         { name: "li tao" },
        //         { name: "grossman stuart" },
        //         { name: "[anonymous]" }
        //     ],
        //     links: [
        //         {
        //             source: 4125,
        //             target: 3920
        //         },
        //         {
        //             source: 3920,
        //             target: 4125
        //         },
        //         {
        //             source: 2284,
        //             target: 4125
        //         },
        //         {
        //             source: 2304,
        //             target: 4150
        //         },
        //         {
        //             source: 4150,
        //             target: 240
        //         },
        //         {
        //             source: 240,
        //             target: 4125
        //         },
        //         {
        //             source: 1987,
        //             target: 4046
        //         },
        //         {
        //             source: 4046,
        //             target: 4125
        //         },
        //         {
        //             source: 2853,
        //             target: 4125
        //         },
        //         {
        //             source: 4153,
        //             target: 4125
        //         }
        //     ],
        //     nodes: [
        //         {
        //             category: "plon sharon e",
        //             id: 4125,
        //             symbolSize: 1,
        //             name: "chen wei",
        //             value: "1",
        //             aidList: [1885374]
        //         },
        //         {
        //             category: "bergdahl ellinor",
        //             id: 3920,
        //             symbolSize: 1,
        //             name: "chen wei",
        //             value: "1",
        //             aidList: [1800755]
        //         },
        //         {
        //             category: "barrios becky",
        //             id: 2284,
        //             symbolSize: 1,
        //             name: "chen wei",
        //             value: "1",
        //             aidList: [1313167]
        //         },
        //         {
        //             category: "barrios becky",
        //             id: 2304,
        //             symbolSize: 1,
        //             name: "chen wei",
        //             value: "1",
        //             aidList: [1313167]
        //         },
        //         {
        //             category: "plon sharon e",
        //             id: 4150,
        //             symbolSize: 1,
        //             name: "chen wei",
        //             value: "1",
        //             aidList: [1885374]
        //         },
        //         {
        //             category: "sarin shiv k",
        //             id: 240,
        //             symbolSize: 1,
        //             name: "chen wei",
        //             value: "1",
        //             aidList: [369055]
        //         },
        //         {
        //             category: "faderl stefan",
        //             id: 1987,
        //             symbolSize: 2,
        //             name: "chen wei",
        //             value: "2",
        //             aidList: [1527711, 1261993]
        //         },
        //         {
        //             category: "faderl stefan",
        //             id: 4046,
        //             symbolSize: 1,
        //             name: "chen wei",
        //             value: "1",
        //             aidList: [1857594]
        //         },
        //         {
        //             category: "wang li",
        //             id: 2853,
        //             symbolSize: 1,
        //             name: "chen wei",
        //             value: "1",
        //             aidList: [1514391]
        //         },
        //         {
        //             category: "plon sharon e",
        //             id: 4153,
        //             symbolSize: 1,
        //             name: "chen wei",
        //             value: "1",
        //             aidList: [1885374]
        //         }
        //     ]
        // };
        // this.graphData.links = res.data.links;
        // this.graphData.categories = res.data.categories;
      });
    },
    handlePagination(page, limit) {
      this.queryParam.page = page;
      this.queryParam.limit = limit;
      var key = undefined;
      if (this.queryParam.pram.indexOf("id=") != -1) {
        key = "pram";
      }
      this.getList(key);
    },
    handleShort(shortFiled, shortOrder) {
      this.queryParam.shortFiled = shortFiled;
      this.queryParam.shortOrder = shortOrder;
      if (this.listData.totalElements != 0) {
        this.getList();
      }
    },
    refresh() {
      let key = undefined;
      if (this.queryParam.pram.indexOf("id=") != -1) {
        key = "pram";
      }

      this.queryParam = {
        page: 1,
        limit: 10,
        pram: "",
        type: "QF_Study_Cn_Pubmed",
        jif: "",
        shortOrder: 1,
        shortFiled: 1
      };
      this.factorCheckbox = []; //指数选中
      this.jifLeft = "";
      this.jifRight = "";
      this.journalCheckbox = []; //期刊分区选中
      this.journalType = 0;
      this.referenceCheckList = []; // 文献类型选中
      this.$refs.pt._data.checkList = [];
      this.$refs.journal._data.checkList = [];
      // this.$refs.unit._data.checkList = [];
      this.$refs.country._data.checkList = [];
      this.$refs.author._data.checkList = [];
      this.getList(key);
    },
    handleFilterClick(key, val) {
      let type = true;
      this.queryParam.page = 1;
      if (key == "jif") {
        if (this.jifLeft != "" && this.jifRight != "") {
          if (isNaN(this.jifLeft) && isNaN(this.jifRight)) {
            type = false;
            this.$message.error("请输入数字");
          } else {
            this.queryParam.jif = this.jifLeft + "_" + this.jifRight;
          }
        } else {
          this.queryParam.jif = this.factorCheckbox.join("###");
        }
      } else if (key == "zkyDaLei" || key == "jcrFenQu") {
        this.queryParam[key] = this.journalCheckbox.join("###");
      } else {
        if (val != "") {
          this.queryParam[key] = val;
        } else {
          delete this.queryParam[key];
        }

        if (key == "pram") {
          this.pramValue = val;
        }
      }
      if (type) {
        if (this.listData.totalElements != 0) {
          this.getList(key);
        }
      }
    },
    search() {
      this.queryParam.page = 1;
      this.refresh();
    },
    twiceSearch() {
    },
    AdvSearch() {
      this.$router.push({path: "/advanced"});
    },
    handleShow(e) {
      this.popoverShow = true;
    },
    handleHide() {
      this.popoverShow = false;
    }
  },
  computed: {}
};
</script>
<style lang="scss" scoped>
.medreading {
  background: #fff;
  min-width: 1300px;

  .search {
    width: 685px;
    margin: 0 auto;

    .search-div {
      display: inline-block;

      ::v-deep .el-input,
      ::v-deep .el-input__inner {
        width: 413px;
      }

      ::v-deep .el-select .el-input,
      ::v-deep .el-select .el-input__inner {
        width: 95px;
      }
    }

    .el-button {
      height: 45px;
      padding: 9px;
      border-radius: 0;
    }

    .el-button--primary {
      width: 85px;
      background-color: #3d8bf1;
    }

    .is-plain {
      width: 110px;
      border: solid 1px #3d8bf1;
      color: #3d8bf1;
    }
  }

  .mr-main {
    min-width: 1300px;
    padding: 0 3%;
    display: flex;
    flex-direction: row;
    min-height: calc(100vh - 230px);

    .mr-filter {
      width: 350px;
      position: relative;

      > .el-button {
        position: absolute;
        top: -50px;
      }

      ::v-deep .sidebar-item {
        box-shadow: -0.5px 0.15px 11.9px 0.1px rgba(60, 117, 230, 0.1);
        margin-bottom: 20px;

        h2 {
          width: 100%;
          height: 45px;
          line-height: 45px;
          background-color: #e5ecfc;
          font-size: 16px;
          color: #333333;
          padding: 0 18px;
          box-sizing: border-box;
          margin-bottom: 20px;
        }

        > div {
          padding: 0 25px 25px;

          .el-checkbox {
            width: 100%;
            margin-bottom: 10px;
          }

          .el-button {
            width: 73px;
            height: 26px;
            background-color: #ebf2ff;
            border-radius: 3px;
            border: solid 0.5px #bccbee;
            display: block;
            padding: 0;
          }

          > p {
            margin-bottom: 10px;

            span {
              cursor: pointer;
            }
          }
        }
      }

      .sidebar-factor {
        > div {
          .el-radio {
            width: 50%;
            margin: 0 0 10px 0;
          }

          ::v-deep .el-input,
          ::v-deep .el-input__inner {
            width: 70px;
            height: 22px !important;
            line-height: 22px !important;
          }

          ::v-deep .el-input {
            padding: 0;
            margin: 5px 0 15px;
          }

          ::v-deep .el-input__inner {
            padding: 0 10px;
          }

          > span {
            width: 10px;
            height: 1.5px;
            font-size: 13px;
            background-color: #333333;
            display: inline-block;
            margin: 0 10px;
            vertical-align: 6px;
          }
        }
      }

      .sidebar-journal {
        .el-radio {
          margin-bottom: 10px;
        }
      }
    }

    .mr-con {
      min-width: 700px;
      width: 100%;
      margin-left: 20px;
      box-shadow: -0.5px 0.15px 11.9px 0.1px rgba(60, 117, 230, 0.1);
    }
  }
}
</style>
